var bodyEle = document.querySelector('body')
var boxEle = document.getElementsByClassName('box')
var textEle = document.getElementsByClassName('text')
for (var i = 0; i < 9; i++) {
    bodyEle.innerHTML += `<div class='box' id="${i+1}"></div>`
    for (var j = 0; j <= i; j++) {      
        boxEle[i].innerHTML +=`<span class='text' id='${j+1}'>${j+1}X${i+1}=</span>`
    }
}


bodyEle.onmouseover = function (e) {
    var item = e.target.tagName.toLocaleLowerCase();
    if (item == 'span') {
        var i = e.target.id,
            j = e.target.parentElement.id;
        e.target.textContent = i * j;
    }
}
bodyEle.onmouseout = function (e) {
    var item = e.target.tagName.toLocaleLowerCase();
    if (item == 'span') {
        var i = e.target.id,
            j = e.target.parentElement.id;
        e.target.textContent = i + 'x' + j + '=';
    }
}

// for (let k = 0; k < textEle.length; k++) {
//     textEle[k].onmouseover = function(e){
//         console.log(e.target.textContent);
//         var text = e.target.innerText
//         var arr = [...text]
//         console.log(arr);
//         e.target.textContent = arr[0]*arr[2]
//     } 

//     textEle[k].onmouseout = function(e){
//         e.target.textContent
//     }
// }
